<template>
	<view class="home">
<!-- 		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<view class="devlist" v-for="(i,index) in dataList" :key="index" @click="devShow(i)">
				<image class="img" :src="i.productImage" mode=""></image>
				<view class="devitem">
					<view class="">
						<view class="nick">
							{{i.nickName}}
						</view>
					</view>
					
					<view class="text">
						设备编号：{{i.deviceName}}
					</view>
					<view class="text">
						{{i.imei}}
					</view>
				</view>
				<uni-icons type="right" color="#adadad" size="26"></uni-icons>

			</view>
		</mescroll-body> -->
		<view class="devlist" v-for="(i,index) in dataList" :key="index" @click="devShow(i)">
			<image class="img" src="@/static/home/moe.png" mode=""></image>
			<view class="devitem">
				<view class="">
					<view class="nick">
						{{i.nickName}}
					</view>
				</view>
				
				<view class="text">
					设备编号：{{i.deviceName}}
				</view>
				<view class="text">
					{{i.imei}}
				</view>
			</view>
			<uni-icons type="right" color="#adadad" size="26"></uni-icons>
		
		</view>
	</view>
</template>

<script>
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/beibei/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
		},
		data() {
			return {
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [
					{
						nickName:'军一支',
						deviceName:'SJGQ2024001',
					},
					{
						nickName:'赵陵铺',
						deviceName:'SJGQ2024002',
					},
					{
						nickName:'和乐寺',
						deviceName:'SJGQ2024003',
					}
				]
			}
		},
		onLoad(option) {
			// let page = {
			// 	num: 1,
			// 	size: 10
			// }
			// this.upCallback(page)
		},
		methods: {
			devShow(i){
				uni.navigateTo({
					url: '/pages/home/monitorList/gatePosition/show?nickName=' + i.nickName
				});
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/device/listPhone', {
					params: {
						"pageSize": pageSize,
						"pageNum": pageNum,
						"productKey": 'ioteb64a942' //雨量站
					}
				}).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据

						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		padding: 30rpx;

		.devlist {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background-color: #fafbfd;
			border-bottom: 2rpx solid #d7d7d8;
			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				margin: 10rpx;
			}
			.devitem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				.nick{
					// text-align: center;
					// border-radius: 10rpx;
					font-size: 40rpx;
					color: #100f23;
					// margin-bottom: 10rpx;
					// background-color: #3c557f;
				}
				.text{
					// text-align: center;
					font-size: 30rpx;
					// margin: 15rpx;
					color: #868688;
				}
			}

		}
	}
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>